// import './assets/main.css'

// import { createApp } from 'vue'
// import App from './App.vue'

// createApp(App).mount('#app')

// 创建vue实例
const { createApp } = Vue;
const app = createApp({
  data() {
    return {
      heroList: [],
      query: {
        key: 'dingwei', //zonghe || dingwei
        value: 0, //10,11 || 0-6
      },
      checked: 0,
      keyword: '',
      typeList:{
        zonghe:[
            {name:'本周免费',value:10},
            {name:'新手推荐',value:11},
        ],
        dingwei:[
            {name:'全部',value:0},
            {name:'坦克',value:3},
            {name:'战士',value:1},
            {name:'法师',value:2},
            {name:'刺客',value:4},
            {name:'射手',value:5},
            {name:'辅助',value:6},
        ]
      }
    };
  },
  computed: {
    //计算属性(将一些复杂的逻辑或者很长表达式封装)
    heroDetail() {
      return (value) => {
        return `https://pvp.qq.com/web201605/herodetail/${value}.shtml`;
      };
    },
    heroImage() {
      return (value) =>
        `https://game.gtimg.cn/images/yxzj/img201606/heroimg/${value}/${value}.jpg`;
    },
    filterHeros() {
      const { key, value } = this.query;
      const keyword = this.keyword;

      if (keyword === '') {
        //分成如下情况
        if (key === 'zonghe') {
          //过滤数组中,pay_type属性值 = 10 或者 11
          return this.heroList.filter((item) => item.pay_type === value);
        } else if (key === 'dingwei') {
          //value为0,显示全部英雄
          if (value === 0) {
            return this.heroList;
          } else {
            return this.heroList.filter(
              (item) => item.hero_type === value || item.hero_type2 === value
            );
          }
        }
      } else {
        // return this.heroList.filter((item) => item.cname.includes(keyword))
        let res = this.heroList.filter((item) => item.cname.includes(keyword));
        // console.log(res)
        res = _.cloneDeep(res);
        return res.map((item) => {
          item.cname = item.cname.replace(
            keyword,
            `<span style="color:red">${keyword}</span>`
          );
          return item;
        });
      }
    },
  },
  methods: {
    async getHeroList() {
      //http://project.x-zd.net:3001/apis/herolist
      //如果有问题,拆分过程,打印看
      const { data } = await axios.get(
        'http://project.x-zd.net:3001/apis/herolist'
      );
      this.heroList = data.data.reverse();
      console.log(this.heroList);
    },
    changeType(type, value) {
      this.query.key = type;
      this.query.value = value;
      this.checked = value;
      this.keyword = '';
    },
    changeKeyword(e) {
      this.keyword = e.target.value;
      this.checked = 0;
      this.query.value = 0;
    },
  },
  //mounted 生命周期函数
  mounted() {
    //异步请求数据
    this.getHeroList();
  },
});
app.mount('#app');
